<template>
	<view class="bg-white" :style="{height:screenHeight+'px'}">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">介绍费新增</block>
		</cu-custom>
		<view style="background-color: #fff; padding: 15px;">
			<!-- <view class="cu-form-group" style="background-color: #F4F4F4;border-radius: 15px;margin-top: 15rpx;">
				<view class="title">支付日期</view>
				<picker mode="date" :value="createTime" @change="DateChange">
					<view style="text-align:right;font-size: 20rpx;line-height: 15px;">
						{{createTime != '' ? createTime.replaceAll('-','/') : '请选择'}}
					</view>
				</picker>
			</view> -->
			<!-- <view style="margin-top: 10px;">
				<view class="action" style="margin-bottom: 5px;">
					<text class="cuIcon-titles " style="color: #1E5EFF;"></text>
					<text style="color: #5A607F;font-size: 25rpx;">
						支付明细
					</text>
					<text @click="addPayList"
						style="float: right;padding: 8rpx 20rpx;background-color: rgba(69, 145, 254, 1);border-radius: 10rpx;color:#FFFFFF;">
						新增
					</text>
				</view>
				<view style="padding: 10px;" v-for="(item,index) in dataObj.payDetails" :key="index">
					<view
						style="padding: 15rpx 30rpx;background-color: rgba(237, 233, 233, 1);border-radius: 10px 10px 0px 0px;text-align: right;">
						<text @click="deletePayList(index)" class="cuIcon-delete" style="color: #FF3B3B;"></text>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">介绍人</view>

						<my-seach-select range-key="text" value-key="value" dict-code="sys_user,realname,id"
							v-model="userId" />
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">介绍人工号</view>
						<input disabled name="input" v-model="item.workNo"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">员工工资记录</view>
						<input name="input" v-model="item.payroll"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
						<view class="title">介绍费</view>
						<input name="input" v-model="item.introductionFee"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
						<view class="title">实际介绍费</view>
						<input name="input" v-model="item.realIntroductionFee"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
						<view class="title">说明</view>
						<input name="input" v-model="item.illustrate"></input>
					</view>
				</view>
			</view> -->
			<view style="margin-top: 10px;">
				<view class="action" style="margin-bottom: 5px;">
					<text class="cuIcon-titles " style="color: #1E5EFF;"></text>
					<text style="color: #5A607F;font-size: 25rpx;">
						介绍费新增
					</text>
				</view>
				<view style="padding: 10px;">

					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">领取人姓名</view>
						<!-- <my-select range-key="text" @change="userIdChange" value-key="value"
							dict-code="sys_user,realname,id" v-model="dataObj.userId" /> -->
						<my-seach-select range-key="text" value-key="value" dict-code="sys_user,realname,id"
							v-model="userId" />
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">领取人工号</view>
						<input disabled name="input" v-model="dataObj.receiverWorkNo"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">领取人身份证</view>
						<input disabled name="input" v-model="dataObj.receiverIdCard"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">领取人职务</view>
						<input disabled name="input" v-model="dataObj.departIds_dictText"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">领取人手机号</view>
						<input disabled name="input" v-model="dataObj.receiverPhone"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
						<view class="title">介绍费</view>
						<input name="input" type="number" v-model="dataObj.introductionFee"></input>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
						<view class="title">与被介绍人关系</view>
						<my-select range-key="text" value-key="value" dict-code="family_relationship"
							v-model="dataObj.relationship" />
						<!-- <input name="input" v-model="dataObj.relationship"></input> -->
					</view>
					<!-- <view class="cu-form-group" style="background: #FAFAFA;border-radius:  0px 0px 10px 10px;">
						<view class="title">发放月份</view>
						<input name="input" v-model="dataObj.distributionTime"></input>
					</view> -->
					<view class="cu-form-group">
						<view class="title">发放月份</view>
						<picker mode="date" fields="month" :value="dataObj.distributionTime"
							@change="DateChangeGraduationTime">
							<view class="picker">
								{{distributionTime}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group" style="background: #FAFAFA;">
						<view class="title">被介绍姓名</view>
						<!-- <my-select range-key="text" @change="userIdChange" value-key="value"
							dict-code="sys_user,realname,id" v-model="dataObj.userId" /> -->
						<my-seach-select range-key="text" value-key="value" dict-code="sys_user,realname,id"
							v-model="userId2" />
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍人入职时间</view>
						<input disabled name="input" v-model="dataObj2.introductionEmploymentTime"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍人身份证号</view>
						<input disabled name="input" v-model="dataObj2.introductionIdCard"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍人年龄</view>
						<input disabled name="input" v-model="dataObj2.introductionAge"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍人性别</view>
						<input disabled name="input" v-model="dataObj2.introductionSex"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍人职务</view>
						<input disabled name="input" v-model="dataObj2.departIds_dictText"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍人手机号</view>
						<input disabled name="input" v-model="dataObj2.introductionPhone"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">被介绍熟练程度</view>
						<input disabled name="input" v-model="dataObj2.proficiency_dictText"></input>
					</view>
					<view class="cu-form-group" style="background: #E2E2E2;">
						<view class="title">进场性质</view>
						<input disabled name="input" v-model="dataObj2.identityCategory_dictText"></input>
					</view>
				</view>
			</view>
			<view style="display: flex;">
				<view @click="submit"
					style="width: 60%; padding: 30rpx 55px; margin-left: 160rpx;margin-top: 20rpx; background-color: rgba(30, 94, 255, 1);border-radius: 30rpx;color: #FFFFFF;font-size: 10px;margin-right: 5px;text-align: center;">
					提交
				</view>
				<!-- <view @click="save"
					style="padding: 30rpx 65px;margin-left: 20rpx;margin-top: 20rpx;border-radius: 30rpx;background-color: rgba(255, 173, 4, 1); color: #FFFFFF;">
					保存
				</view> -->
			</view>
			<uni-popup ref="submitFlag" background-color="#fff" :mask-click="false">
				<view
					style="text-align: center;background-color: #FFFFFF;padding: 11rpx;width: 580rpx;height: 470rpx;border-radius: 42rpx;">
					<view>
						<view class="submit-item">
							<image class="submit-icon" src="@/static/duihaoblue.png" />
						</view>
						<view style="margin-top: 28rpx;">
							<text class="submit-text">提交成功</text>
						</view>
						<view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx;">
							<text>已提交</text>
						</view>
						<button @click="sureOne" style="border-radius: 20rpx; background-color: rgba(69, 145, 254, 1);
									color: rgba(255, 255, 255, 1);width: 300rpx;margin-top: 27rpx;">确定</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				distributionTime: moment().format('YYYY-MM-DD'),
				id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
				daysFromSigning: '',
				contractType: 2,
				createTime: '',
				endTime: '',
				signTime: '',
				userId: '',
				userId2: '',
				screenHeight: uni.getSystemInfoSync().windowHeight,
				dataObj: {
					payDetails: [{
						userId: '',
						payroll: '',
						introductionFee: '',
						realIntroductionFee: '',
						illustrate: '',
						workNo: '',
					}],
				},
				dataObj2: {},
			}
		},
		mounted() {

		},

		watch: {
			// 'dataObj.payDetails': {
			// 	handler: function(newPayDetails, oldPayDetails) {
			// 		// 在这里执行逻辑，循环遍历检测属性变化
			// 		for (let i = 0; i < newPayDetails.length; i++) {
			// 			const newUserId = newPayDetails[i].userId;
			// 			const oldUserId = oldPayDetails[i].userId;
			// 			if (newPayDetails[i].userId != '') {
			// 				this.$http.get('/crm_user/crmUser/queryById', {
			// 					params: {
			// 						id: newPayDetails[i].userId
			// 					}
			// 				}).then(res => {
			// 					console.log("res", res)
			// 					if (res.data.success) {
			// 						newPayDetails[i].workNo = res.data.result.workNo
			// 					}
			// 				}).catch(err => {
			// 					console.log(err);
			// 				});
			// 			}
			// 		}
			// 	},
			// 	deep: true, // 深度监听数组内部的变化
			// },
			userId: {
				immediate: true,
				handler(val, old) {
					console.log("dataObject.userId值变化")
					console.log(val)
					console.log(old)
					this.userId = val;
					if (this.userId != '') {
						this.queryUserByUserId()
					}
				},
			},
			userId2: {
				immediate: true,
				handler(val, old) {
					console.log("dataObject2.userId值变化")
					console.log(val)
					console.log(old)
					this.userId2 = val;
					if (this.userId2 != '') {
						this.queryUserByUserId2()
					}
				},
			},
		},
		computed: {

		},
		methods: {
			DateChangeGraduationTime(e) {
				this.distributionTime = e.detail.value
				this.dataObj.distributionTime = e.detail.value + "-01"
				console.log("this.dataObj.distributionTime==" + this.dataObj.distributionTime)
			},
			queryUserByUserId() {
				this.$http.get('/crm_user/crmUser/queryById', {
					params: {
						id: this.userId
					}
				}).then(res => {
					console.log("res", res)
					if (res.data.success) {
						this.dataObj = res.data.result
						this.dataObj.receiverIdCard = res.data.result.idCard
						this.dataObj.receiverWorkNo = res.data.result.workNo
						this.dataObj.receiverDepartIds = res.data.result.departIds
						this.dataObj.departIds_dictText = res.data.result.departIds_dictText
						this.dataObj.receiverPhone = res.data.result.phone
						this.userId = res.data.result.id
						this.dataObj.receiver = res.data.result.id
						this.dataObj.realname = res.data.result.realname
					}
				}).catch(err => {
					console.log(err);
				});
			},
			queryUserByUserId2() {
				this.$http.get('/crm_user/crmUser/queryById', {
					params: {
						id: this.userId2
					}
				}).then(res => {
					console.log("res", res)
					if (res.data.success) {
						this.dataObj2 = res.data.result
						this.dataObj2.introductionEmploymentTime = res.data.result.enterFactoryTime
						this.dataObj2.introductionIdCard = res.data.result.idCard
						this.dataObj2.introductionAge = res.data.result.age
						this.dataObj2.introductionSex = res.data.result.sex_dictText
						this.dataObj2.sex = res.data.result.sex
						this.dataObj2.introductionPost = res.data.result.departIds
						this.dataObj2.departIds_dictText = res.data.result.departIds_dictText
						this.dataObj2.introductionPhone = res.data.result.phone
						this.dataObj2.proficiency_dictText = res.data.result.proficiency_dictText
						this.dataObj2.proficiency = res.data.result.proficiency
						this.dataObj2.identityCategory = res.data.result.identityCategory
						this.dataObj2.identityCategory_dictText = res.data.result.identityCategory_dictText
						this.userId2 = res.data.result.id
						this.dataObj2.introduction = res.data.result.id
						this.dataObj2.realname = res.data.result.realname
					}
				}).catch(err => {
					console.log(err);
				});
			},
			addPayList() {
				this.dataObj.payDetails.push({
					userId: '',
					payroll: '',
					introductionFee: '',
					realIntroductionFee: '',
					illustrate: '',
					workNo: '',
				})
			},
			deletePayList(index) {
				this.dataObj.payDetails.splice(index, 1);
			},
			RadioChange(e) {
				this.contractType = e.detail.value
			},
			DateChange(e) {
				this.createTime = e.detail.value
			},
			submit() {
				const that = this
				this.$http.post('/crm_introduction_fee/crmIntroductionFee/add', {
					"id": this.id,
					"approvalStatus": 1,
					"distributionTime": this.dataObj.distributionTime,
					"identityCategory": this.dataObj2.identityCategory,
					"introduction": this.dataObj2.introduction,
					"introductionAge": this.dataObj2.introductionAge,
					"introductionDepartIds": this.dataObj2.introductionPost,
					"introductionEmploymentTime": this.dataObj2.introductionEmploymentTime,
					"introductionFee": this.dataObj.introductionFee,
					"introductionIdCard": this.dataObj2.introductionIdCard,
					"introductionPhone": this.dataObj2.introductionPhone,
					"introductionSex": this.dataObj2.sex,
					"introductionTxt": this.dataObj2.realname,
					"proficiency": this.dataObj2.proficiency,
					"receiver": this.dataObj.receiver,
					"receiverDepartIds": this.dataObj.receiverDepartIds,
					"receiverIdCard": this.dataObj.receiverIdCard,
					"receiverPhone": this.dataObj.receiverPhone,
					"receiverTxt": this.dataObj.realname,
					"receiverWorkNo": this.dataObj.receiverWorkNo,
					"relationship": this.dataObj.relationship,
				}).then(res => {
					if (res.data.success) {
						this.$refs.submitFlag.open('center')
					} else {
						this.$tip.toast(res.data.message)
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.toast('提交失败')
				});
			},
			sureOne() {
				this.$refs.submitFlag.close()
				uni.navigateTo({
					url: '/pages/introductionFeeEntry/index'
				})
			},
			save() {

			},
			userIdChange(id) {
				debugger
			}
		}
	}
</script>

<style>
	.cu-form-group {
		background-color: #ffffff;
		line-height: 15px;
		padding: 0.5px 15px;
		display: flex;
		align-items: center;
		min-height: 42px;
		justify-content: space-between;
	}

	.cu-form-group uni-picker .picker {
		line-height: 15px;
		font-size: 15px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.cu-form-group uni-picker::after {
		font-family: cuIcon;
		line-height: 15px;
		display: block;
		content: "\e6a3";
		position: absolute;
		font-size: 17px;
		color: #8799a3;
		width: 31px;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -10px;
		margin: auto;
	}

	/deep/ .uni-radio-input {
		width: 15px;
		height: 15px;
	}

	.nav-right-image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 15px;
	}

	.submit-text {

		font-size: 32rpx;
	}

	.submit-icon {
		width: 118rpx;
		height: 118rpx;
		margin-top: 58rpx;
	}

	.red-tag {
		width: 120px;
		background-color: #fdc1be;
		color: #ff261b;
		text-align: center;
		margin-left: 5px;
		display: inline-block;
		padding: 7px;
		font-size: 25rpx;
		border-radius: 20px;
	}
</style>
